<section>
  <header><h3>主要导航</h3></header>
  <article>
    <p><code>.nav-primary</code></p>
    <div class="example">
      <ul class="nav nav-primary">
        <li class="active"><a href="###">首页</a></li>
        <li><a href="###">动态 <span class="label label-badge label-success">4</span></a></li>
        <li><a href="###">项目 </a></li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="###">任务</a></li>
            <li><a href="###">bug</a></li>
            <li><a href="###">需求</a></li>
            <li><a href="###">用例</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <pre><code>&lt;ul class=&quot;nav nav-primary&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;your/nice/url&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;动态 &lt;span class=&quot;label label-badge label-success&quot;&gt;4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;项目 &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;
    &lt;a class=&quot;dropdown-toggle&quot; data-toggle="dropdown" href="your/nice/url&quot;&gt;更多 &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;ul class=&quot;dropdown-menu&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;任务&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;bug&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;需求&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;用例&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
  </article>
</section>

<section>
  <header>
    <h3>次要导航</h3>
  </header>
  <article>
    <p>通常与主导航一起使用</p>
    <p><code>.nav-secondary</code></p>
    <div class="example">
      <ul class="nav nav-secondary">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">动态</a>
        </li>
        <li>
          <a href="###">项目</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <pre><code>&lt;ul class=&quot;nav nav-secondary&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;your/nice/url&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;动态 &lt;span class=&quot;label label-badge label-success&quot;&gt;4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  ...
&lt;/ul&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>标签页导航</h3></header>
  <article>
    <p><code>.nav-tabs</code></p>
    <div class="example">
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">动态</a>
        </li>
        <li>
          <a href="###">项目</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <pre><code>&lt;ul class=&quot;nav nav-tabs&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;your/noce/url&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;your/noce/url&quot;&gt;动态 &lt;span class=&quot;label label-badge label-success&quot;&gt;4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  ...
&lt;/ul&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>圆点导航</h3></header>
  <article>
    <p><code>.nav-pills</code></p>
    <div class="example">
      <ul class="nav nav-pills">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">动态</a>
        </li>
        <li>
          <a href="###">项目</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <pre><code>&lt;ul class=&quot;nav nav-pills&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;your/noce/url&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;your/noce/url&quot;&gt;动态 &lt;span class=&quot;label label-badge label-success&quot;&gt;4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  ...
&lt;/ul&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>禁用的导航链接</h3></header>
  <article>
    <p>在禁用的项目上添加<code>.disabled</code></p>
    <div class="example">
      <ul class="nav nav-primary">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">动态</a>
        </li>
        <li class="disabled">
          <a href="###">项目</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">动态</a>
        </li>
        <li class="disabled">
          <a href="###">项目</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-pills">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">动态</a>
        </li>
        <li class="disabled">
          <a href="###">项目</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-secondary">
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">动态</a>
        </li>
        <li class="disabled">
          <a href="###">项目</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <pre><code>&lt;ul class=&quot;nav nav-primary&quot;&gt;
  &lt;li class=&quot;disabled&quot;&gt;&lt;a disabled href=&quot;your/noce/url&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;your/noce/url&quot;&gt;动态 &lt;span class=&quot;label label-badge label-success&quot;&gt;4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  ...
&lt;/ul&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>垂直排列</h3></header>
  <article>
    <p><code>.nav-stacked</code></p>
    <div class="example">
      <div class="row">
        <div class="col-md-4">
          <ul class="nav nav-primary nav-stacked">
            <li class="active">
              <a href="###">首页 </a>
            </li>
            <li>
              <a href="###">动态 <span class=
              "label label-badge label-success pull-right">4</span></a>
            </li>
            <li>
              <a href="###">项目 </a>
            </li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li>
                  <a href="">任务</a>
                </li>
                <li>
                  <a href="">Bug</a>
                </li>
                <li>
                  <a href="">需求</a>
                </li>
                <li>
                  <a href="">用例</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="col-md-4">
          <ul class="nav nav-secondary nav-stacked">
            <li class="active">
              <a href="###">首页 </a>
            </li>
            <li>
              <a href="###">动态 <span class=
              "label label-badge label-success pull-right">4</span></a>
            </li>
            <li>
              <a href="###">项目 </a>
            </li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li>
                  <a href="">任务</a>
                </li>
                <li>
                  <a href="">Bug</a>
                </li>
                <li>
                  <a href="">需求</a>
                </li>
                <li>
                  <a href="">用例</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="col-md-4">
          <ul class="nav nav-stacked nav-pills">
            <li class="active">
              <a href="###">首页 </a>
            </li>
            <li>
              <a href="###">动态 <span class=
              "label label-badge label-success pull-right">4</span></a>
            </li>
            <li>
              <a href="###">项目 </a>
            </li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li>
                  <a href="">任务</a>
                </li>
                <li>
                  <a href="">Bug</a>
                </li>
                <li>
                  <a href="">需求</a>
                </li>
                <li>
                  <a href="">用例</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <pre><code>&lt;ul class=&quot;nav nav-primary nav-stacked&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;your/noce/url&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;your/noce/url&quot;&gt;动态 &lt;span class=&quot;label label-badge label-success&quot;&gt;4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  ...
&lt;/ul&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>自适应宽度</h3></header>
  <article>
    <p>自适应宽度不能与垂直排列同时使用</p>
    <p><code>.nav-justified</code></p>
    <div class="example">
      <ul class="nav nav-primary nav-justified">
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">动态 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">项目 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-justified nav-tabs">
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">动态 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">项目 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-secondary nav-justified">
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">动态 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">项目 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-justified nav-pills">
        <li class="active">
          <a href="###">首页 </a>
        </li>
        <li>
          <a href="###">动态 <span class=
          "label label-badge label-success pull-right">4</span></a>
        </li>
        <li>
          <a href="###">项目 </a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <pre><code>&lt;ul class=&quot;nav nav-primary nav-justified&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;your/noce/url&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;your/noce/url&quot;&gt;动态 &lt;span class=&quot;label label-badge label-success&quot;&gt;4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  ...
&lt;/ul&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>带标题的导航</h3></header>
  <article>
    <div class="example">
      <ul class="nav nav-tabs">
        <li class="nav-heading">这是标题</li>
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">动态</a>
        </li>
        <li class="disabled">
          <a href="###">项目</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-pills">
        <li class="nav-heading">这是标题</li>
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">动态</a>
        </li>
        <li class="disabled">
          <a href="###">项目</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <ul class="nav nav-secondary">
        <li class="nav-heading">This is heading</li>
        <li class="active">
          <a href="###">首页</a>
        </li>
        <li>
          <a href="###">动态</a>
        </li>
        <li class="disabled">
          <a href="###">项目</a>
        </li>
        <li>
          <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li>
              <a href="">任务</a>
            </li>
            <li>
              <a href="">Bug</a>
            </li>
            <li>
              <a href="">需求</a>
            </li>
            <li>
              <a href="">用例</a>
            </li>
          </ul>
        </li>
      </ul>
      <br>
      <div class="row">
        <div class="col-sm-4">
          <ul class="nav nav-primary nav-stacked">
            <li class="nav-heading">这是标题</li>
            <li class="active">
              <a href="###">首页 </a>
            </li>
            <li>
              <a href="###">动态 <span class=
              "label label-badge label-success pull-right">4</span></a>
            </li>
            <li>
              <a href="###">项目 </a>
            </li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li>
                  <a href="">任务</a>
                </li>
                <li>
                  <a href="">Bug</a>
                </li>
                <li>
                  <a href="">需求</a>
                </li>
                <li>
                  <a href="">用例</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="col-sm-4">
          <ul class="nav nav-secondary nav-stacked">
            <li class="nav-heading">THIS IS HEADINGS</li>
            <li class="active">
              <a href="###">首页 </a>
            </li>
            <li>
              <a href="###">动态 <span class=
              "label label-badge label-success pull-right">4</span></a>
            </li>
            <li>
              <a href="###">项目 </a>
            </li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li>
                  <a href="">任务</a>
                </li>
                <li>
                  <a href="">Bug</a>
                </li>
                <li>
                  <a href="">需求</a>
                </li>
                <li>
                  <a href="">用例</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="col-sm-4">
          <ul class="nav nav-stacked nav-pills">
            <li class="nav-heading">THIS IS HEADINGS</li>
            <li class="active">
              <a href="###">首页 </a>
            </li>
            <li>
              <a href="###">动态 <span class=
              "label label-badge label-success pull-right">4</span></a>
            </li>
            <li>
              <a href="###">项目 </a>
            </li>
            <li>
              <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多 <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li>
                  <a href="">任务</a>
                </li>
                <li>
                  <a href="">Bug</a>
                </li>
                <li>
                  <a href="">需求</a>
                </li>
                <li>
                  <a href="">用例</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <pre><code>&lt;ul class=&quot;nav nav-stacked&quot;&gt;
  &lt;li class=&quot;nav-heading&quot;&gt;这是标题&lt;/li&gt;
  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;your/nice/url&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;your/nice/url&quot;&gt;动态 &lt;span class=&quot;label label-badge label-success&quot;&gt;4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  ...
&lt;/ul&gt;</code></pre>
  </article>
</section>

<script>
function afterPageLoad() {
    $('#pageContent').on('click', '.nav > li > a', function() {
        var $item = $(this).parent('li');
        $item.parent().children('.active').removeClass('active');
        $item.addClass('active');
    });
}
</script>
